<section id="dashboard">

  <div class="row mrgn-tp-lg" *ngIf="!inited">
    <div class="col-sm-12 page-load">
      <div class="loading-indicator"></div>
    </div>
  </div>


  <h1 class="dashboard-title text-center" translate *ngIf="inited">dashboard.title</h1>

  <div class="row" *ngIf="inited">
    <div class="col-sm-12">

      <div class="text-center">
        <ul class="stats">
          <li class="stat"><span class="numbers">{{recordCounts.orgs | number}}</span> {{'dashboard.title-orgs' | translate}}</li>
          <li class="stat"><span class="numbers">{{recordCounts.certs | number}}</span> {{'dashboard.title-certs' | translate}}</li>
        </ul>
        <div class="search-outer">
          <div [class]="'large-search' + (searchFocused ? ' active' : '')">
            <span class="fa fa-search" *ngIf="!loading" (click)="focusSearch($event)"></span>
            <span class="load" *ngIf="loading"><div class="loading-indicator"></div></span>
            <input type="text" id="searchInput" name="query" size="40" [placeholder]="'search.placeholder'|translate" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" (input)="inputEvent($event)" (focus)="inputEvent($event)" (blur)="inputEvent($event)">
          </div>
        </div>
      </div>

      <div class="results mrgn-tp-lg" *ngIf="results.length || none">
        <label class="control-label" translate>search.results-title</label>
        <div *ngIf="searchType=='name' && !none">
          <div class="row" *ngFor="let record of results">
            <div class="col-sm-6">
              <a href="" [routerLink]="['/org', record.id] | localize">{{record.legalName}}</a><br>
              <!-- small>{{record.type.description}}</small -->
            </div>
            <div class="col-sm-6">
              {{record.primaryLocation.street}}<br>
              <small>{{record.primaryLocation.summary}}</small>
            </div>
          </div>
        </div>
      </div>

      <div class="row results-nav" *ngIf="more || less">
        <div class="col-sm-12 text-right">
          <ul class="pager">
            <li *ngIf="less">
              <a href="#" (click)="prev(); $event.preventDefault();">&lt;&lt; {{'general.prev-link' | translate}}</a>
            </li>
            <li *ngIf="more">
              <a href="#" (click)="next(); $event.preventDefault();">{{'general.next-link' | translate}} &gt;&gt;</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <a class="btn btn-primary btn-lg" href="/en/recipe/indy_world" role="button">Add a new Person to Indy World</a>

</section>
